<template>
  <div class="edit-box w-card">
    <div class="content-box">
      <div class="title-box">
        <span>商品编辑</span>
      </div>
      <div class="content-info">
        <div>
          <div class="info-content">
            <el-form ref="storeInfoRef" :model="storeInfo" :rules="storeInfoRules">
              <div class="info-title">商品基本信息</div>
              <el-row>
                <el-col :span="6">
                  <el-form-item prop="typeId" style="width:80%" label="商品类型">
                    <el-select style="width:100%" disabled v-model="storeInfo.typeId" clearable @change="typeChange">
                      <el-option v-for="item in typeOptions" :key="item.typeId" :label="item.typeName" :value="item.typeId" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item prop="categoryId" style="width:80%" label="分类">
                    <el-select style="width:100%" disabled v-model="storeInfo.categoryId" clearable no-data-text="请先选择类型"
                      @change="cateChange">
                      <el-option v-for="item in simpleOptions" :key="item.categoryId" :label="item.categoryName"
                        :value="item.categoryId" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item prop="brandId" style="width:80%" label="品牌">
                    <el-select style="width:100%" disabled v-model="storeInfo.brandId" clearable no-data-text="请先选择分类"
                      @change="brandChange">
                      <el-option v-for="item in brandOptions" :key="item.brandId" :label="item.brandName" :value="item.brandId" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item prop="goodsName" style="width:80%" label="商品名称">
                    <el-input v-model="storeInfo.goodsName" clearable placeholder="请输入商品名称" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item prop="tag" label="标签">
                    <el-select style="width:80%" v-model="storeInfo.tag" filterable allow-create clearable>
                      <el-option v-for="item in tagOptions" :key="item" :label="item" :value="item" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6" v-if="storeInfo.typeId == 2">
                  <el-form-item prop="rechargeTypeId" label="充值类型">
                    <el-select v-model="storeInfo.rechargeTypeId" clearable placeholder="请选择充值类型">
                      <el-option v-for="item in rechargeTypeOptions" :key="item.rechargeTypeId" :label="item.rechargeTypeName"
                        :value="item.rechargeTypeId" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <div class="info-title" v-show="storeInfo.typeId != 3">生产定义</div>
              <el-row v-if="storeInfo.typeId != 3">
                <el-col :span="6">
                  <el-form-item prop="produceMode" style="width:80%" label="生产方式">
                    <el-radio-group v-model="storeInfo.produceMode">
                      <el-radio :label="2">自动生产</el-radio>
                      <el-radio :label="1">手动生产</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row v-for="(item,index) in storeInfo.channelProductList" :key="item">
                <el-col :span="6">
                  <el-form-item :prop="'channelProductList.'+index+'.channelCode'" :rules="storeInfoRules.channelCode"
                    style="width:80%" label="上游平台">
                    <el-select style="width:100%" v-model="item.channelCode" clearable
                      @change="(e) => {channelCodeChange(e,item)}">
                      <el-option v-for="items in item.syOptions" :key="items.channelCode" :label="items.channelName"
                        :value="items.channelCode" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item :prop="'channelProductList.'+index+'.recordId'" :rules="storeInfoRules.recordId" style="width:80%"
                    label="上游商品">
                    <el-select style="width:100%" filterable v-model="item.recordId" clearable no-data-text="请先选择上游平台">
                      <el-option v-for="items in item.goodsOptions" :key="items.recordId" :label="items.channelProductName"
                        :value="items.recordId" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6" style="display: flex;align-items: center">
                  <el-icon size="24" class="icon-cl" @click="deleteChannel(storeInfo.channelProductList,index)">
                    <CircleClose />
                  </el-icon>
                </el-col>
              </el-row>
              <el-button v-if="(storeInfo.produceMode == 2) && (storeInfo.typeId && storeInfo.typeId != 3)"
                style="margin-bottom: 20px;" size="small" type="primary"
                @click="addChannel(storeInfo.channelProductList)">增加上游平台</el-button>

              <!-- <el-row v-if="storeInfo.produceMode == 2">
                <el-col :span="6">
                  <el-form-item prop="channelCode" style="width:80%" label="上游平台">
                    <el-select style="width:100%" v-model="storeInfo.channelCode" clearable @change="channelCodeChange">
                      <el-option v-for="item in syOptions" :key="item.channelCode" :label="item.channelName"
                        :value="item.channelCode" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item prop="recordId" style="width:80%" label="上游商品">
                    <el-select style="width:100%" filterable v-model="storeInfo.recordId" clearable no-data-text="请先选择上游平台">
                      <el-option v-for="item in goodsOptions" :key="item.recordId" :label="item.channelProductName"
                        :value="item.recordId" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row> -->

              <div class="info-title">商品价格信息</div>
              <el-row>
                <el-col :span="5">
                  <el-form-item prop="officialPrice" style="width:90%" label="官方价(元)">
                    <el-input v-model="storeInfo.officialPrice" type="Number" min="0" placeholder="请输入官方价" />
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item prop="costPrice" style="width:90%" label="成本价(元)">
                    <el-input v-model="storeInfo.costPrice" type="Number" min="0" placeholder="请输入成本价" />
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item prop="discountPrice" style="width:90%" label="折扣价(元)">
                    <el-input v-model="storeInfo.discountPrice" type="Number" min="0" placeholder="请输入折扣价" />
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item prop="suggestPrice" style="width:90%" label="建议价(元)">
                    <el-input v-model="storeInfo.suggestPrice" type="Number" min="0" placeholder="请输入建议价" />
                  </el-form-item>
                </el-col>
              </el-row>
              <div class="info-title">商品详细信息</div>
              <el-form-item prop="headImg" style="width:80%" label="商品主图">
                <div v-show="!storeInfo.headImg" class="upload-box-img" @click="uploadImg">
                  <el-icon>
                    <Plus />
                  </el-icon>
                </div>
                <div class="upload-box" v-show="storeInfo.headImg">
                  <img :src="storeInfo.headImg" alt="">
                  <el-icon color="#ffffff" class="upload-close" @click="removeImg">
                    <Close />
                  </el-icon>
                </div>
                <input ref="uploadInputRef" style="display:none" type="file" accept="image/*" @change="uploadChange">
                <el-button style="margin:0 5px;" type="primary" @click="toSucai('headImg')" size="small">从素材库选择</el-button>
                <span style="color:#808080;font-size:12px;margin-left:10px;">提示：商品主图建议长宽比为16:9</span>
              </el-form-item>
              <el-form-item prop="goodsDetail" style="width:100%" label="商品详情">
                <Editor width="100%" v-model="storeInfo.goodsDetail" :api-key="apiKey" :init="init" />
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="btn-box">
          <el-button @click="lookGoods">预览</el-button>
          <el-button style="margin-left:auto;" @click="backHandle">取消</el-button>
          <el-button type="primary" @click="confirmHandle">确定修改</el-button>
        </div>
      </div>
    </div>
  </div>
  <look-goods ref="lookGoodsRef" />
  <choose-file ref="chooseFileRef" @dialogClose="chooseFileClose" />
</template>

<script>
import { onMounted, reactive, ref, toRefs } from 'vue'
import Editor from "@tinymce/tinymce-vue";
import axios from "axios"
import api from './api'
import { successDeal, warningDeal, accMul, accDiv } from '@/utils/utils';
import { useRoute, useRouter } from 'vue-router';
import lookGoods from '@/components/lookGoods.vue'
import chooseFile from '@/components/chooseFile.vue'
export default {
  components: {
    Editor,
    lookGoods,
    chooseFile,
  },
  setup() {
    const route = useRoute()
    const router = useRouter()

    const uploadInputRef = ref(null)
    const storeInfoRef = ref(null)
    const lookGoodsRef = ref(null)
    const chooseFileRef = ref(null)

    let myEditor = null

    const imgUrlPass = (rule, value, callback) => {
      if (!state.storeInfo.headImg) {
        callback(new Error('请上传商品主图'))
      } else {
        callback()
      }
    }

    const state = reactive({
      storeInfo: {},
      storeInfoRules: {
        goodsName: [
          { required: true, message: '请输入商品名称', trigger: 'blur' },
        ],
        typeId: [
          { required: true, message: '请选择商品类型', trigger: 'blur' },
        ],
        categoryId: [
          { required: true, message: '请选择商品分类', trigger: 'blur' },
        ],
        brandId: [
          { required: true, message: '请选择商品品牌', trigger: 'blur' },
        ],
        produceMode: [
          { required: true, message: '请选择生产方式', trigger: 'blur' },
        ],
        channelCode: [
          { required: true, message: '请选择上游平台', trigger: 'blur' },
        ],
        recordId: [
          { required: true, message: '请选择上游商品', trigger: 'blur' },
        ],
        rechargeTypeId: [
          { required: true, message: '请选择充值类型', trigger: 'blur' },
        ],
        officialPrice: [
          { required: true, message: '请输入官方价', trigger: 'blur' },
          {
            pattern: /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/, message: '请输入大于等于0的数字', trigger: 'blur'
          },
        ],
        costPrice: [
          { required: true, message: '请输入成本价', trigger: 'blur' },
          {
            pattern: /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/, message: '请输入大于等于0的数字', trigger: 'blur'
          },
        ],
        discountPrice: [
          { required: true, message: '请输入折扣价', trigger: 'blur' },
          {
            pattern: /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/, message: '请输入大于等于0的数字', trigger: 'blur'
          },
        ],
        suggestPrice: [
          { required: true, message: '请输入建议价', trigger: 'blur' },
          {
            pattern: /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/, message: '请输入大于等于0的数字', trigger: 'blur'
          },
        ],
        headImg: [
          { required: true, validator: imgUrlPass, trigger: 'blur' },
        ],
        goodsDetail: [
          { required: false, message: '请输入商品详情', trigger: 'blur' },
        ],
      },
      typeOptions: [],
      simpleOptions: [],
      brandOptions: [],
      syOptions: [],
      goodsOptions: [],
      rechargeTypeOptions: [],
      fileForm: {},
      fileProp: null,
      tagOptions: [],
    })

    const tiny = reactive(
      {
        content: '',
        apiKey: "30z4d794gbb0oum14mrl99ew2hzuy7u0v33lp5fqxt9fz40b",
        init: {
          language: "zh_CN",
          placeholder: "在这里输入文字",
          min_width: 320,
          min_height: 220,
          height: 500,
          resize: "both",
          branding: false,
          font_formats:
            "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;", //字体样式
          plugins:
            "print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount textpattern autosave emoticons", //插件配置 axupimgs indent2em
          toolbar: [
            "materiallibrary | fullscreen undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | bullist numlist | blockquote subscript superscript removeformat ",
            "styleselect formatselect fontselect fontsizeselect |  table image axupimgs media emoticons charmap hr pagebreak insertdatetime  selectall visualblocks searchreplace | code print preview | indent2em lineheight formatpainter",
          ],
          setup: function (editor) {
            myEditor = editor
            editor.ui.registry.addIcon(
              "material-cart",
              `素材`
            );
            editor.ui.registry.addButton("materiallibrary", {
              icon: `material-cart`,
              onAction: function (_) {
                materiallibraryShow()
              }
            });
          },
          images_upload_url: PROCESS_ENV.ENVIRONMENT == 'Production' ? '/coupon_h5/ums/file/upload/img' : '/ums/file/upload/img',
          paste_data_images: false,
          images_upload_handler: (blobInfo, success, failure) => {
            const myBlob = blobInfo.blob()
            let param = new FormData()
            param.append('file', myBlob, Math.random() * 1000000 + 1 + '.jpg')
            let config = {
              headers: {
                'Content-Type': 'multipart/form-data',
                token: '',
                Authorization: `'','','',3,20,''`,
                platformHeadType: 'ilinkPlatform',
              }
            }
            let url = '/ums/file/upload/img'
            if (PROCESS_ENV.ENVIRONMENT == 'Production') {
              url = '/coupon_h5' + url
            }
            axios.post(url, param, config).then(res => {
              if (res.data.code == '200') {
                success(res.data.data.ossUrl)
              } else {
                warningDeal(res.data.msg)
              }
            }).catch(err => {
              console.log(err)
            })
          },

          file_picker_types: "file image media",
          file_picker_callback: function (callback, value, meta) {
            let filetype;
            if (meta.filetype == "image") {
              filetype = ".jpg, .jpeg, .png, .gif, .ico, .svg";
            } else if (meta.filetype == "media") {
              filetype = ".mp3, .mp4, .avi, .mov";
            } else {
              filetype =
                ".pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4, .jpg, .jpeg, .png, .gif, .ico, .svg";
            }
            let inputElem = document.createElement("input");
            inputElem.setAttribute("type", "file");
            inputElem.setAttribute("accept", filetype);
            inputElem.click();
            inputElem.onchange = () => {
              let file = inputElem.files[0];
              let reader = new FileReader();
              reader.readAsDataURL(file);
              reader.onload = function () {
                let id = "blobid" + new Date().getTime();
                let blobCache = tinymce.activeEditor.editorUpload.blobCache;
                let base64 = reader.result.split(",")[1];
                let blobInfo = blobCache.create(id, file, base64);
                blobCache.add(blobInfo);
                callback(blobInfo.blobUri(), { title: file.name });
              };
            };
          },
        },
      }
    );

    function materiallibraryShow() {
      toSucai('tiny')
    }

    function typeChange(e) {
      state.storeInfo.categoryId = null
      state.storeInfo.brandId = null
      state.storeInfo.rechargeTypeId = null
      state.simpleOptions = []
      state.brandOptions = []
      state.rechargeTypeOptions = []
      if (e) {
        getSimOptions(e)
      }
    }

    function cateChange(e) {
      state.storeInfo.brandId = null
      state.storeInfo.rechargeTypeId = null
      state.brandOptions = []
      state.rechargeTypeOptions = []
      if (!e) {
        state.brandOptions = []
        state.rechargeTypeOptions = []
        return
      }
      goodsBrandSimple(e)
    }

    function brandChange(e) {
      state.storeInfo.recordId = null
      state.brandOptions.map(item => {
        if (item.brandId == e) {
          state.storeInfo.logoImg = item.logoImg
          state.storeInfo.brandName = item.brandName
        }
      })
      state.rechargeTypeOptions = []
      state.storeInfo.rechargeTypeId = null
      if (e) {
        getRecharge(e)
      } else {
        state.rechargeTypeOptions = []
        state.storeInfo.rechargeTypeId = null
      }
      if (e && state.storeInfo.channelCode) {
        getGoodsOptions()
      }
    }

    function channelCodeChange(e, data) {
      data.recordId = null
      data.goodsOptions = []
      if (e) {
        getGoodsOptions(data)
      }
    }

    function getGoodsOptions(data) {
      if (!data) return
      const obj = {
        page: 1,
        size: 10000,
        brandId: state.storeInfo.brandId || null,
        channelCode: data.channelCode || null,
      }
      api.productList(obj).then(res => {
        if (res.code == '200') {
          data.goodsOptions = res.data.list
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function getSimOptions(typeId) {
      const obj = {
        typeId
      }
      api.goodsCategoryListSimple(obj).then(res => {
        if (res.code == '200') {
          state.simpleOptions = res.data
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function getTypeOptions() {
      api.goodsTypeListSimple().then(res => {
        if (res.code == '200') {
          state.typeOptions = res.data
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function goodsBrandSimple(categoryId) {
      const obj = {
        categoryId
      }
      api.goodsBrandSimple(obj).then(res => {
        if (res.code == '200') {
          state.brandOptions = res.data
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function uploadImg() {
      uploadInputRef.value.click()
    }

    //上传文件
    async function uploadChange(e) {
      state.fileForm = {}
      state.fileForm.file = e.target.files[0]
      state.fileForm.fileName = e.target.files[0].name
      await uploadFile()
      uploadInputRef.value.value = ''
    }

    function removeImg() {
      state.fileForm = {}
      state.storeInfo.headImg = null
    }

    async function uploadFile() {
      let path = null
      let param = new FormData()
      param.append('file', state.fileForm.file, state.fileForm.fileName)
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data',
          token: '',
          Authorization: `'','','',3,20,''`,
          platformHeadType: 'ilinkPlatform',
        }
      }
      let url = '/ums/file/upload/img'
      if (PROCESS_ENV.ENVIRONMENT == 'Production') {
        url = '/coupon_h5' + url
      }
      await axios.post(url, param, config).then(res => {
        if (res.data.code == '200') {
          path = res.data.data.ossUrl
        } else {
          warningDeal(res.data.msg)
        }
      }).catch(err => {
        console.log(err)
      })
      state.storeInfo.headImg = path
    }

    function getchannelProductList(data) {
      let myArr = []
      data && data.map(item => {
        myArr.push(item.recordId)
      })
      return myArr
    }

    function confirmHandle() {
      storeInfoRef.value.validate((valid, fields) => {
        if (valid) {
          const obj = {
            goodsId: state.storeInfo.goodsId,
            goodsName: state.storeInfo.goodsName || null,
            typeId: state.storeInfo.typeId || null,
            categoryId: state.storeInfo.categoryId || null,
            brandId: state.storeInfo.brandId || null,
            produceMode: state.storeInfo.produceMode || null,
            channelCode: state.storeInfo.produceMode == 2 ? state.storeInfo.channelCode : null,
            recordId: state.storeInfo.produceMode == 2 ? state.storeInfo.recordId : null,
            officialPrice: accMul(state.storeInfo.officialPrice, 10000),
            costPrice: accMul(state.storeInfo.costPrice, 10000),
            discountPrice: accMul(state.storeInfo.discountPrice, 10000),
            suggestPrice: accMul(state.storeInfo.suggestPrice, 10000),
            headImg: state.storeInfo.headImg || null,
            goodsDetail: state.storeInfo.goodsDetail || null,
            rechargeTypeId: state.storeInfo.rechargeTypeId || null,
            tag: state.storeInfo.tag || null,
            channelProductList: getchannelProductList(state.storeInfo.channelProductList),
          }
          api.goodsInfoModify(obj).then(res => {
            if (res.code == '200') {
              successDeal(res.msg)
              backHandle()
            } else {
              warningDeal(res.msg)
            }
          }).catch(err => {
            console.log(err)
          })
        }
      })
    }

    function backHandle() {
      router.go(-1)
    }

    async function getDetails(goodsId) {
      const obj = {
        goodsId
      }
      await api.goodsInfoDetail(obj).then(res => {
        if (res.code == '200') {
          state.storeInfo = res.data
          state.storeInfo.officialPrice = accDiv(res.data.officialPrice, 10000)
          state.storeInfo.costPrice = accDiv(res.data.costPrice, 10000)
          state.storeInfo.discountPrice = accDiv(res.data.discountPrice, 10000)
          state.storeInfo.suggestPrice = accDiv(res.data.suggestPrice, 10000)
          getSimOptions(res.data.typeId)
          goodsBrandSimple(res.data.categoryId)
          if (res.data.produceMode == 2) {
            getGoodsOptions()
          }
          getRecharge(res.data?.brandId)
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function lookGoods() {
      storeInfoRef.value.validate((valid, fields) => {
        if (valid) {
          lookGoodsRef.value.dialogShow(2, {
            ...state.storeInfo,
            officialPrice: accMul(state.storeInfo.officialPrice, 10000),
            costPrice: accMul(state.storeInfo.costPrice, 10000),
            discountPrice: accMul(state.storeInfo.discountPrice, 10000),
            suggestPrice: accMul(state.storeInfo.suggestPrice, 10000),
          })
        }
      })
    }

    function getSyOptions() {
      api.channelList().then(res => {
        if (res.code == '200') {
          state.syOptions = res.data.list
          setSyOptions(res.data.list)
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function setSyOptions(list) {
      state.storeInfo.channelProductList && state.storeInfo.channelProductList.map(item => {
        item.syOptions = list
        getGoodsOptions(item)
      })
    }

    function handleChange(e) {
      state.storeInfo.recordId = e[e.length - 1]
    }


    function getRecharge(brandId) {
      const obj = {
        brandId
      }
      api.goodsInfoRechargeType(obj).then(res => {
        if (res.code == '200') {
          state.rechargeTypeOptions = res.data
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function toSucai(name) {
      state.fileProp = name
      chooseFileRef.value.dialogShow()
    }

    function chooseFileClose(file) {
      if (state.fileProp == 'tiny') {
        myEditor.insertContent(
          `<img src="${file.filePath}" />`
        )
        return
      }
      state.storeInfo[state.fileProp] = file.filePath
    }

    function getTagOptions() {
      const obj = {
        type: 2,
      }
      api.goodsTagList(obj).then(res => {
        if (res.code == '200') {
          state.tagOptions = res.data.tagList
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function addChannel(data) {
      const obj = {}
      obj.syOptions = state.syOptions
      if (!data) {
        state.storeInfo.channelProductList = [obj]
      } else {
        data.push(obj)
      }
    }

    function deleteChannel(data, index) {
      if (!data) return
      data.splice(index, 1)
    }

    onMounted(async () => {
      const goodsId = route.query.goodsId
      if (goodsId) {
        await getDetails(goodsId)
      }
      // if (!state.storeInfo.channelProductList) {
      //   state.storeInfo.channelProductList = [{}]
      // }
      getTypeOptions()
      getSyOptions()
      getTagOptions()
    })

    return {
      ...toRefs(state),
      ...toRefs(tiny),
      uploadInputRef,
      storeInfoRef,
      lookGoodsRef,
      chooseFileRef,
      typeChange,
      cateChange,
      uploadImg,
      uploadChange,
      removeImg,
      confirmHandle,
      backHandle,
      lookGoods,
      brandChange,
      handleChange,
      channelCodeChange,
      toSucai,
      chooseFileClose,
      addChannel,
      deleteChannel,
    }
  }
}
</script>

<style lang="scss" scoped>
.edit-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .content-box {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 20px;
    .title-box {
      font-size: 16px;
      font-weight: bold;
    }
  }
}
.content-info {
  width: 100%;
  .info-title {
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: -20px;
    padding-bottom: 10px;
    &::before {
      content: "";
      display: block;
      height: 16px;
      width: 4px;
      background-color: #0081ff;
    }
  }
  > div {
    width: 100%;
    box-sizing: border-box;
    padding: 20px 0;
    .info-content {
      width: 100%;
      box-sizing: border-box;
      padding: 0 20px;
      > div {
        font-size: 14px;
        display: flex;
        width: 100%;
        margin-top: 20px;
        > div {
          width: 50%;
          color: #5f5f66;
          > span {
            color: #000000;
          }
        }
      }
      .img-box {
        display: flex;
      }
    }
  }
  > div:first-of-type {
    border-bottom: 1px dashed #d4d4d4;
  }
}
.btn-box {
  display: flex;
  align-items: center;
  padding-bottom: 0 !important;
}
.upload-box {
  position: relative;
  > img {
    max-width: 150px;
    max-height: 100px;
  }
  .upload-close {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    background-color: rgba($color: #000000, $alpha: 0.5);
  }
}
.upload-box-img {
  width: 50px;
  height: 50px;
  border: 1px dashed #b3b3b5;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.upload-box {
  position: relative;
  > img {
    max-width: 150px;
    max-height: 80px;
  }
  .upload-close {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    background-color: rgba($color: #000000, $alpha: 0.5);
  }
}

.icon-cl {
  cursor: pointer;
  color: #707070;
  transition: all 0.2s;
  &:hover {
    color: #0081ff;
  }
}
</style>